<template>
  <view>
    <view class="page-content">
      <view v-for="item in renderList" :key="item.key">
        <text>
          <text v-if="item.required" style="color: red;">*</text>
          {{ item.title }}
        </text>

        <!-- 输入框 -->
        <input
          v-if="item.type === 'input-text'"
          :placeholder="item.placeholder"
          :value="item.value"
          @input="inputChange($event, item)"
        />

        <!-- 选择框 -->
        <picker
          :value="item.showLabel"
          @change="(e) => selectChange(e, item)"
          :range="item.selLabels"
          v-if="item.type === 'pick-select'"
        >
          <view class="input-suffix">
            <view class="value-view">
              {{ item.showLabel || item.placeholder }}
            </view>

            <view class="row-suffix">
              <view class="image-content">
                <image v-if="img_url" :src="img_url + 'collapse.png'" />
              </view>
            </view>
          </view>
        </picker>

        <!-- 选择图片 -->
        <text
          v-if="item.type === 'pick-img'"
          @click="chooseImage(item)"
          class="row-suffix row-suffix1 color-blue"
        >
          {{ item.value ? '已选择' : item.placeholder }}
        </text>
      </view>
    </view>

    <!-- #ifdef MP-ALIPAY -->
    <canvas
      v-show="false"
      :width="imgWidth"
      :height="imgHeight"
      style="opacity: 0; position: absolute; pointer-events: none;"
      id="canvasForBase64"
    />
    <!--#endif -->
  </view>
</template>

<script>
import { uUtils  } from '@/utils';

const selKeys = ['pick-select'];
export default {
  props: {
    list: {
      type: Array,
      default: () => [
        {
          title: '输入框',
          required: true,
          type: 'input-text',
          value: '',
          placeholder: '上传证件自动填写',
          key: 'key1',
          emptyMsg: '值不能为空',

          reg: /^[a-zA-Z]{0,}$/.toString(), // 与 regMsg 配合(以字符串形式传入， 特殊符号要有转义符:  ^\\s*$), 只有value值是字符串时候有效
          regMsg: '正则校验失败',
        },

        {
          title: '选择器',
          type: 'pick-select',
          // required: true,
          value: '',
          placeholder: '请选择患者证件类型',
          key: 'key2',
          items: [
            {
              label: '身份证',
              value: '1',
            },
            {
              label: '住院号',
              value: '2',
            },
          ],
        },

        {
          title: '选择图片',
          // required: true,
          type: 'pick-img',
          value: '',
          placeholder: '请选择',
          key: 'key3',
        },
      ],
    },
  },

  data() {
    return {
      imgHeight: 0,
      imgWidth: 0,
      img_url: this.$GLOBAL.BASE_IMG,
      renderList: [],
    };
  },

  methods: {
    init() {
      const { list } = this;

      this.renderList = [];
      list.map((o) => {
        const { type, items, key, value } = o;
        this.renderList.push(
          Object.assign(o, {
            selLabels: selKeys.includes(type) ? items.map((o) => o.label) : [],
            selValues: selKeys.includes(type) ? items.map((o) => o.value) : [],
            showLabel: '',
          })
        );

        if (selKeys.includes && value !== '') {
          this.fLabel(o);
        }
      });
    },

    selectChange(e, item) {
      const { selValues } = item;
      const v = selValues[e.detail.value * 1];

      this.setValue(item, v);
    },

    chooseImage(item) {
      uUtils.chooseImage(this).then(({ base64, success }) => {
        if (success) {
          this.setValue(item, base64);
        }
      });
    },

    setValue(item, v, arg = {}) {
      const { key, type } = item;
      const { renderList } = this;
      const { key: otherKey } = arg;
      const o = renderList.find((o) => o.key === key);

      const changeKey = otherKey ? otherKey : 'value';

      o[changeKey] = v;

      if (selKeys.includes(type)) {
        this.fLabel(o);
      }

      if (changeKey === 'value') {
        this.$emit('value-change', o, v);
      }
      this.$nextTick(this.$forceUpdate);
    },

    // 选择器显示对应label
    fLabel: function (item) {
      const { selLabels, selValues, value } = item;

      const index = selValues.findIndex((o) => o === value);

      item.showLabel = index !== -1 ? selLabels[index] : '';
    },

    inputChange({ detail: { value } }, item) {
      this.setValue(item, value);
    },

    submit() {
      const flag = uUtils.checkVaild(this.renderList);
      if (flag) {
        this.$emit('submit', this.renderList);
      }
    },
  },

  watch: {
    list: {
      immediate: true,
      handler: function () {
        this.init();
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.page-content {
  margin-top: 40upx;
  position: relative;

  > view {
    width: 750upx;
    height: 88upx;
    padding-left: 30upx;
    background: rgba(255, 255, 255, 1);
    border-bottom: 1upx solid #e6e6e6;
    display: flex;

    text {
      justify-content: center;
      align-items: center;
      font-size: 32upx;
      font-weight: 400;
      margin-top: 22upx;
      color: rgba(102, 102, 102, 1);
      line-height: 45upx;
    }

    input,
    .value-view {
      position: absolute;
      left: 262upx;
      margin-top: 22upx;
      font-size: 32upx;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 45upx;
    }

    .value-view {
      color: #999999;

      // #ifdef MP-ALIPAY
      left: 282upx;
      // #endif
    }
  }

  input {
    width: calc(100% - 262upx - 80upx);
  }

  .input-suffix {
    // left: 58upx;
    display: flex;
    justify-content: space-between;
    height: 88upx;
    width: 490upx;
    // margin-left: 55upx;
    input {
      left: 55upx;

      // #ifdef MP-WEIXIN
      left: 261upx;
      // #endif

      // #ifdef MP-ALIPAY
      position: relative;
      // #endif
    }
  }

  .row-suffix {
    position: absolute;
    right: 28upx;

    .image-content {
      width: 40upx;
      height: 40upx;
      padding: 8upx;
      position: relative;
      transform: translateY(30%);
    }

    image {
      // background-color: red;
      width: 100%;
      height: 100%;
      transform: rotate(-90deg);
    }
  }

  .row-suffix1 {
    // position: absolute;
    transform: translateY(-10%);
    margin-right: 28upx;
  }
  .no-border {
    border: none;
  }
  .color-blue {
    color: #4c8fff;
  }

  .border-top {
    position: relative;
    &::after {
      content: '';
      display: block;
      position: absolute;
      right: 0;
      left: 28upx;
      height: 1upx;
      background-color: #80808064;
    }
  }
}
</style>
